body {
  margin: 0;
  background-color: #c6e9f4;
  font-family: Abel;
}

main {
  height: 100%;
  display: -webkit-flex;
  -webkit-flex-flow: row;
  color: red;
}

region {
  display: inline;
  height: calc(100% - 2em);
  width: 100%;
  margin: .3em;
  padding: .6em .5em .4em .5em;
  border: .2em ridge #be2026;
  border-radius: .5em;
  box-shadow: .3em .3em .5em #303030;
  background-color: black;
  overflow: hidden;
}

iconbar {
  position: relative;
  top: -.5em;
  right: -1em;
  padding: .5em .5em 0 .2em;
  border: .2em ridge #be2026;
  border-radius: .5em;
  background-color: #202020;
}

icon {
  display: inline;
  padding: 0;
  width: 1em;
  height: 1em;
}

tabbar {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  top: -.7em;
}

tab {
  padding: .3em .2em .2em .2em;
  border: .2em ridge #be2026;
  border-radius: .5em;
  cursor: pointer;
  font-family: "Supermercado One";
  text-transform: lowercase;
  background-color: #202020;
}

tab.active {
  color: #c6e9f4;
  cursor: default;
}

playlist {
  display: -webkit-flex;
  -webkit-flex: 0 0 12em;
}

content_messages_channel {
  display: -webkit-flex;
  -webkit-flex: 1 1 0;
  -webkit-flex-flow: column;
}

content_messages {
  display: -webkit-flex;
  -webkit-flex: 1 1 0;
  -webkit-flex-flow: row;
}

content {
  display: -webkit-flex;
  min-height: 22em;
  min-width: 30em;
  -webkit-flex: 1 1 0;
}

messages {
  display: -webkit-flex;
  -webkit-flex: 0 0 15em;
}

channel {
  display: -webkit-flex;
  -webkit-flex: 0 0 12.5em;
}

media {
  display: inline-block;
  width: 9.5em;
  height: 8.5em;
  padding: .2em;
  background-color: #be2026;
  border: .1em solid #601013;
  border-radius: .2em;
  color: white;
  margin: .1em;
}

media_title {
  display: block;
  width: 9.5em;
  overflow: hidden;
  white-space: nowrap;
}

media_duration {
  position: absolute;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: .2em;
  border-radius: .2em;
  font-size: small;
}

media > img {
  width: 9.5em;
}

.icon {
  width: 1em;
  height: 1em;
}

#login-status {
  cursor: pointer;
}

@media all and (max-width: 45em) {
  content_messages {
    -webkit-flex-flow: column;
  }
}

@media all and (max-width: 60em) {
  main {
    -webkit-flex-flow: column;
  }
  playlist {
    -webkit-order: 2;
    min-width: 30em;
  }
  content_messages_channel {
    -webkit-order: 1;
    min-width: 30em;
  }
}
